<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ include file="/WEB-INF/tiles2/common.jsp" %>
<div class="page-header">
	<div class="alert alert-info"><h3 class="panel-title">회원가입</h3></div>
</div>
<article >
	<div class="progress joinstep" id="step">
		<div class="progress-bar progress-bar-gray bright" style="width: 25%">
			<h3 class="panel-title dragdown">이용약관</h3>
		</div>
		<div class="progress-bar progress-bar-danger bright" style="width: 25%">
			<h3 class="panel-title dragdown">가입확인</h3>
		</div>
		<div class="progress-bar progress-bar-gray bright" style="width: 25%">
			<h3 class="panel-title dragdown">정보입력</h3>
		</div>
		<div class="progress-bar progress-bar-gray" style="width: 25%">
			<h3 class="panel-title dragdown">가입완료</h3>
		</div>		
	</div>	<!-- 이동 경로 -->	
	<div>
		<form id="join2frm" class="well form-horizontal">
			<div class="row topmargin">
				<div class="form-group">
					<label for="name" class="col-sm-2 control-label">이름</label>
					<div class="col-sm-3">
						<input type="text" class="form-control" id="name" name="name" />
					</div>
				</div>
				<div class="form-group">
					<label for="ettcaddr" class="col-sm-2 control-label">전자우편 주소</label>
					<div class="col-sm-6">
						<div class="input-group">
							<input type="text" name="email1" id="email1" class="form-control" value="${email1}" />
							<span class="input-group-addon addon-border">@</span>
							<input type="text" name="email2" id="email2" class="form-control" readonly="readonly" value="${email2}" />
							<div class="input-group-btn">
								<select id="email3" class="btn btn-info addon-select">
									<option>선택하세요</option>
									<option value="manual">직접입력</option>
									<option>gmail.com</option>
									<option>naver.com</option>
									<option>hanmail.net</option>
									<option>nate.com</option>
								</select>
							</div>		
						</div>
					</div>
					<input type="hidden" name="email" id="email" />
				</div> <!-- 전자우편 주소 -->
			</div>
			<hr />
			<div class="tcenter">
				<button class="btn btn-primary" id="okbtn">확인하기</button>
				<button class="btn btn-danger" id="cancelbtn">취소하기</button>
			</div>	<!-- 버튼들 -->		
		</form>
	</div> <!-- 회원가입 -->
	
</article>

<!-- 스크립트 -->
<script>
	$("#email3").change(function(){
		if ($("#email3").val()!="manual") {
			$("#email2").val($("#email3").val()).attr("readonly", "readonly");
		} else {
			$("#email2").removeAttr("readonly").val("").focus();
		}
	});
	$("#okbtn").on("click", function(event){
		if ($("#name2").val()=="") alert("이름을 입력하세요");
		else if ($("#email1").val()=="") alert("이메일주소를 입력하세요");
		else if ($("#email2").val()=="") alert("이메일주소를 입력하세요");
		else {
			$("#email").val($("#email1").val()+"@"+$("#email2").val());
			$("#join2frm").attr("method", "post").submit();
		}
	});
	
	$("#cancelbtn").on("click", function(event){
		$(location).attr("href", "<c:url value='index.pen' />");
	});
</script>